<template>
	<view class="flex-col page">
	  <view class="flex-col section">
	    <view class="flex-col justify-start items-center text-wrapper"><text class="text">信息编辑</text></view>
	    <view class="flex-row justify-between">
	      <view class="flex-col items-center space-y-32">
	        <image
			@click="ToBack()"
	          class="image_2"
	          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158293730110351.png"
	        />
	        <image
	          class="image_4"
	          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158295681486580.png"
	        />
	      </view>
	      <image
	        class="self-start image_3"
	        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158295487327157.png"
	      />
	    </view>
	  </view>
	  <view class="flex-col relative group space-y-23">
	    <view class="flex-col justify-start items-center self-center section_2">
	      <view class="flex-col justify-start items-center image-wrapper">
	        <image
	          class="image_5"
	          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873294563459291149.png"
	        />
	      </view>
	    </view>
		<form @submit="onSubmitL">
	    <view class="flex-col space-y-26">
	      <view class="flex-col section_3 space-y-22">
	        <text class="self-start font_1">姓名</text>
	        <view class="flex-row group_2 space-x-18">
	          <image
	            class="image_6"
	            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158330044522097.png"
	          />
	          <input class="font_2 text_2" placeholder="请输入姓名" name="name">
	        </view>
	      </view>
	      <view class="flex-col">
	        <view class="flex-col section_4 view space-y-22">
	          <text class="self-start font_1">手机号码</text>
	          <view class="flex-row items-center space-x-20">
	            <image
	              class="image_7"
	              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158330359702924.png"
	            />
	            <input class="font_2 text_3" placeholder="请输入手机号码" name="phone">
	          </view>
	        </view>
	        <view class="flex-col section_4 view_2 space-y-20">
	          <text class="self-start font_1">邮箱</text>
	          <view class="flex-row items-center space-x-16">
	            <image
	              class="image_8"
	              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158330976702927.png"
	            />
	            <input class="font_3" placeholder="填写邮箱号码" name="email">
	          </view>
	        </view>
	        <view class="flex-col section_4 view_3 space-y-16">
	          <text  class="self-start font_1 text_4" >修改昵称</text> 
	          <view class="flex-row justify-between items-center">
	            <view class="flex-row items-center space-x-16">
	              <image
	                class="shrink-0 image_8"
	                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873163588552895630.png"
	              />
	              <input class="font_3" placeholder="请输入昵称" name="nickname">
	            </view>
	            <image
	              class="image_9"
	              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873163588483837287.png"
	            />
	          </view>
	        </view>
			<view class="flex-col section_4 view_2 space-y-20">
			  <text class="self-start font_1">性别</text>
			  <view class="flex-row items-center space-x-16">
			    <image
			      class="image_8"
			      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158330976702927.png"
			    />
			    <picker class="pick" :range="options" name="gender" :value="selectValue" @change="pickerChange">
			    	<view>{{options[selectValue]}}</view>
			    </picker>
			  </view>
			</view>
			<view class="flex-col section_4 view_2 space-y-20">
			  <text class="self-start font_1">生日</text>
			  <view class="flex-row items-center space-x-16">
			    <image
			      class="image_8"
			      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158330976702927.png"
			    />
			    <picker class="font_3" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" name="date">
			    			<view >{{ date }}</view>
			    		</picker>
			  </view>
			</view>
			<view class="flex-col section_4 view_2 space-y-20">
			  <text class="self-start font_1">地区</text>
			  <view class="flex-row items-center space-x-16">
			    <image
			      class="image_8"
			      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158330976702927.png"
			    />
			    <picker class="font_3" mode="region" :range="years" @change="yearChange">
			                    <view>{{ timetext }} </view>
			    </picker>
			  </view>
			</view>
	       
	       <view class="flex-col section_5 space-y-12">
	          
	        </view>
	      </view>
	    </view>
		<!-- </view> -->
	  <view class="flex-col justify-start items-center relative section_6">
		<button class="flex-col justify-start items-center button text_7" form-type="submit"> 保存</button>
		</view>
	  <!-- </view> -->
	  </form>
	</view>
	</view>
</template>

<script>
	import moment from 'moment'; //引入moment依赖
	import md5 from 'js-md5'; //引入md5依赖
	import {
		changeInf
	} from '../../api/index.js'; //引入会员注册接口
	let timeStamp = moment(new Date().getTime()).format("YYYY-MM-DD HH:mm:ss");
	// const miniProgramAppid = 'wx5183451345781ce6';
	//日期选择器：https://blog.csdn.net/qq_40323256/article/details/114458255
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year -120;
		} else if (type === 'end') {
			year = year ;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		// var info={"year":`${year}`,"month":`${month}`,"day":`${day}`};
		// return info;
	 
		return `${year}-${month}-${day}`;
	}
	
	
	export default {
		data() {
			return {
				isRegister: false,
				openid: uni.getStorageSync("openid"),
				memberId:uni.getStorageSync("memberId"),
				options: ["男", "女"],
				selectValue: 1,
				date: getDate({format: true}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				year:'',
				day:'',
				month:'',
				timetext: '请选择地区',
				province:'',
				district:'',
				city:'',
				
				
				// year=this.date.split('-')[0];
				// month=this.date.split('-')[1];
				// day=this.date.split('-')[2];
		

				
			}
		},
		methods: {
			pickerChange(e) {
				this.selectValue = e.detail.value
			},
			yearChange : function(e){
			               console.log(e)
			               this.timetext = e.detail.value;
						   this.province=e.detail.value[0];
						   this.city=e.detail.value[1];
						   this.district=e.detail.value[2];
						   console.log("省："+this.province+"市"+this.city+this.district);
			           } ,
			bindDateChange: function(e) {
						this.date = e.detail.value;
						console.log(e);
						
						
			},
			onSubmitL(e) {
				console.log(e)
				this.obj = e.detail.value,
				this.obj.gender = this.options[this.selectValue],
				this.obj.date=this.date,
				this.year=this.date.split('-')[0];
				this.month=this.date.split('-')[1];
				this.day=this.date.split('-')[2];
				console.log(this.year+"-"+this.month+'-'+this.day);
				// this.obj.birthDay=this.month+"-"+this.day,
				// console.log(this.month),
				// console.log(this.month+"-"+this.day)

				this.changeInf()
				
			},
			ToBack(){
				
				uni.navigateBack({
				    delta: 1
				})

				
			},
			changeInf(){
				changeInf(
					{
						"address": {
						"city": this.city,
					    "country": "sunt ea laboris eu in",
					    "detail": "mollit consectetur voluptate dolor",
					    "district": this.district,
					    "province": this.province
					    },
					  "birthDay": this.month+"-"+this.day,
					  "birthYear": this.year,
					  "phone": this.obj.phone,
					  "email": this.obj.email,
					  "created":"2023-12-13 13:10:13",
					  "gender": this.obj.gender,
					  "openId": this.openid,
					  "memberId": this.memberId,
					  "nickName":this.obj.nickName,
					  "name":this.obj.name
					}
				).then(res =>{
					console.log(res)
					console.log(this.obj)
					uni.showToast({
						title: '修改信息成功',
						icon: 'none',
						duration: 2000
					})
					
					// uni.navigateBack({
					// 	delta: 1
					// })
				})
				.catch(res => {
					uni.showToast({
						title: '修改信息失败',
						icon: 'none',
						duration: 2000
					})
					console.log("fail")
				})
				
			}

			
		}
	}
</script>

<style lang='scss'>
.page {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  .section {
    padding: 48rpx 50rpx 60rpx;
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873294563394141042.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .text-wrapper {
      padding-bottom: 20rpx;
      .text {
        color: #ffffff;
        font-size: 42rpx;
        font-family: HarmonyOSSansSC;
        line-height: 39rpx;
      }
    }
    .space-y-32 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 64rpx;
      }
      .image_2 {
        width: 88rpx;
        height: 84rpx;
      }
      .image_4 {
        width: 50rpx;
        height: 46rpx;
      }
    }
    .image_3 {
      margin-right: 44rpx;
      margin-top: 68rpx;
      width: 88rpx;
      height: 80rpx;
    }
  }
  .group {
    margin-top: -166rpx;
    padding: 0 44rpx;
    .section_2 {
      padding: 68rpx 0 76rpx;
      background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873294563434836136.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 250rpx;
      .image-wrapper {
        padding: 36rpx 0 24rpx;
        background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873294563449707188.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 116rpx;
        .image_5 {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
    .space-y-26 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 52rpx;
      }
      .section_3 {
        margin-left: 6rpx;
        margin-right: 34rpx;
        padding: 16rpx 0;
        background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16871563970029267102.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-bottom: solid 2rpx #ffefdf;
        .group_2 {
          padding: 0 4rpx;
          .image_6 {
            width: 22rpx;
            height: 24rpx;
          }
          .text_2 {
			padding-left: 35rpx;
            line-height: 25rpx;
          }
        }
        .space-x-18 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 36rpx;
          }
        }
      }
      .space-y-22 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 44rpx;
        }
      }
      .section_4 {
        padding: 16rpx 0;
        background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16871563970029267102.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-bottom: solid 2rpx #fff0df;
        .space-x-20 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 40rpx;
          }
          .image_7 {
            width: 24rpx;
            height: 30rpx;
          }
          .text_3 {
			  color: #55007f;
			  padding-left: 35rpx;
            line-height: 21rpx;
          }
        }
        .text_4 {
          color: #38385e;
        }
        .image_9 {
          width: 48rpx;
          height: 48rpx;
        }
        .text_5 {
          line-height: 23rpx;
        }
      }
      .view {
        margin-left: 8rpx;
        margin-right: 32rpx;
      }
      .font_1 {
        font-size: 24rpx;
        font-family: HarmonyOSSansSC;
        line-height: 22rpx;
        color: #1f1f39;
      }
      .font_2 {
        font-size: 28rpx;
        font-family: HarmonyOSSansSC;
        line-height: 26rpx;
        color: #55007f;
      }
      .view_2 {
        margin: 52rpx 36rpx 0 4rpx;
      }
	  .pick{
		  padding-left: 75rpx;
		  height: 50rpx;
		  color: #55557f;
	  }
      .space-y-20 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 40rpx;
        }
      }
      .view_3 {
        margin-right: 38rpx;
        margin-top: 52rpx;
      }
      .space-y-16 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 32rpx;
        }
      }
      .view_4 {
        margin-right: 40rpx;
        margin-top: 52rpx;
      }
      .space-y-12 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 24rpx;
        }
      }
      .section_5 {
        margin: 44rpx 32rpx 0 8rpx;
        padding: 16rpx 0;
        background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16871563970029267102.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .group_3 {
          margin-top: 16rpx;
        }
        .image_10 {
          width: 48rpx;
          height: 44rpx;
        }
      }
      .space-x-16 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 32rpx;
        }
        .font_3 {
          font-size: 28rpx;
          font-family: HarmonyOSSansSC;
          line-height: 26rpx;
		  padding-left: 35rpx;
          color: #55007f;
        }
        .text_6 {
          line-height: 10rpx;
        }
      }
      .image_8 {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .space-y-23 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 46rpx;
    }
	
  }
  .section_6 {
    margin-top: -20rpx;
    padding: 28rpx 0;
    filter: drop-shadow(0px 4rpx 15rpx #6d6be726);
    background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158297627940802.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .button {
      padding: 24rpx 0 36rpx;
      background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fef445a7e3f0310275929/648ff5ec726ab50011f26fbc/16873158309525349715.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 622rpx;
	  font-size: 36rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 33rpx;
	  color: #ffffff;
	
    }
  }
}
</style>
